[Brand Refactor] Small fixes batch by danielguillan · Pull Request #1387 · primer/brand

danielguillan · 2026-07-01T08:45:44Z

Summary

Towards https://github.com/github/brand-experience/issues/289

Fixes 4 reported UI bugs.

Resolves https://github.com/orgs/github/projects/23995/views/5?pane=issue&itemId=185434044
Resolves https://github.com/github/brand-experience/issues/256
Resolves https://github.com/orgs/github/projects/23995/views/5?pane=issue&itemId=196640953
Resolves https://github.com/orgs/github/projects/23995/views/5?pane=issue&itemId=196639023

List of notable changes:

Updates Pillar icons with background border-radius to 12px
Updates Tiles layout to use three columns on tablet viewports
Fixes Statistic social proof text color consistency
Adjusts MediaPlaylist spacing on narrow viewports

What should reviewers focus on?

Check the story links below.
Check we're comfortable with the new VideoPlayer bottom-controls API and the responsive spacing/column changes.

Steps to test:

Use the following links to verify changes:

Contributor checklist:

All new and existing CI checks pass
Tests prove that the feature works and covers both happy and unhappy paths
Any drop in coverage, breaking changes or regressions have been documented above
UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
All developer debugging and non-functional logging has been removed
Related issues have been referenced in the PR description

Reviewer checklist:

Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
Check that tests prove the feature works and covers both happy and unhappy paths
Check that there aren't other open Pull Requests for the same update/change

Screenshots:

Please try to provide before and after screenshots or videos

Before	After

changeset-bot · 2026-07-01T08:45:49Z

🦋 Changeset detected

Latest commit: ead6d62

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
@primer/react-brand	Patch
@primer/brand-docs	Patch
@primer/brand-css	Patch
@primer/brand-primitives	Patch
@primer/brand-e2e	Patch
@primer/brand-fonts	Patch
@primer/brand-mcp	Patch
@primer/brand-config	Patch
@primer/brand-storybook	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-07-01T08:47:28Z

🟢 No design token changes found

…deployment.

github-actions · 2026-07-01T08:49:02Z

🟢 No unit test coverage changes found

All components and hooks with tests maintain the same coverage as the main branch.

github-actions · 2026-07-01T08:49:05Z

🟢 Bundle size report

Check	Main	Branch	Change
UMD — full bundle (JS)	101.33 kB	101.33 kB	🟢 No change
UMD — full bundle (CSS)	66.74 kB	66.82 kB	⬆️ +82 B (+0.1%)
ESM — full bundle (JS + CSS)	1.51 MB	1.51 MB	⬆️ +31 B (+0.0%)
ESM — tree-shaken simple (Button)	69.69 kB	69.70 kB	⬆️ +7 B (+0.0%)
ESM — tree-shaken complex (ActionMenu)	78.47 kB	78.48 kB	⬆️ +7 B (+0.0%)

github-actions · 2026-07-01T09:00:45Z

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

…/github.com/primer/brand into danielguillan/brand-refactor-p0-fixes-batch

Copilot

Pull request overview

This PR batches several small UI/UX fixes across Primer Brand components and documentation, including an update to the VideoPlayer API to support bottom-positioned controls and improved autoplay story behavior.

Changes:

Extend VideoPlayer with controlsPosition and showControlsWhenPaused, update styles/stories/docs, and adjust useVideo volume/mute state syncing.
Update responsive layout/spacing behaviors for Tiles and MediaPlaylist, plus a small Pillar icon-radius tweak.
Fix a Statistic example’s text color to be consistent, and add changesets for release notes.

Show a summary per file

File	Description
packages/react/src/VideoPlayer/VideoPlayer.tsx	Adds new props and modifies control/overlay rendering and positioning logic.
packages/react/src/VideoPlayer/VideoPlayer.test.tsx	Adds coverage for new paused-controls/autoplay behaviors, mute sync, and bottom controls positioning.
packages/react/src/VideoPlayer/VideoPlayer.stories.tsx	Exposes new props in Storybook controls/default args.
packages/react/src/VideoPlayer/VideoPlayer.module.css.d.ts	Updates CSS module typings for new modifier classes.
packages/react/src/VideoPlayer/VideoPlayer.module.css	Adds styles for bottom-positioned controls and container positioning.
packages/react/src/VideoPlayer/VideoPlayer.features.stories.tsx	Adds an autoplay + bottom-controls feature story.
packages/react/src/VideoPlayer/hooks/useVideo.tsx	Syncs volume/mute state from the underlying `<video>` element more reliably.
packages/react/src/Tiles/Tiles.module.css	Adjusts tablet viewport behavior to use 3 columns.
packages/react/src/Statistic/Statistic.examples.stories.tsx	Updates social proof example heading color token usage.
packages/react/src/Pillar/Pillar.module.css	Updates icon border-radius for “with background” variant.
packages/react/src/MediaPlaylist/MediaPlaylist.module.css	Tweaks spacing on narrow viewports and heading/paragraph spacing.
packages/e2e/scripts/playwright/playwright.generate-tests.ts	Skips the new autoplay story to avoid flakey visual tests.
apps/next-docs/content/components/VideoPlayer/index.mdx	Documents the new autoplay + bottom-controls usage and prop table update.
.changeset/video-player-autoplay-controls.md	Changeset entry for VideoPlayer update.
.changeset/tiles-tablet-columns.md	Changeset entry for Tiles tablet layout update.
.changeset/statistic-color-consistency.md	Changeset entry for Statistic example color update.
.changeset/pillar-icon-radius.md	Changeset entry for Pillar icon radius update.
.changeset/media-playlist-narrow-spacing.md	Changeset entry for MediaPlaylist spacing update.

Review details

Files reviewed: 17/20 changed files
Comments generated: 1
Review effort level: Low

…nd-refactor-p0-fixes-batch

danielguillan added 5 commits June 29, 2026 16:24

Fix Tiles layout

67dff3d

Fix Pillar icons

c273ed1

Fix Statistic color

086e15e

Fix VideoPlayer controls

0771062

Fix MediaPlaylist spacing

bde5691

Auto-merged main into danielguillan/brand-refactor-p0-fixes-batch on …

c7b5c4c

…deployment.

danielguillan temporarily deployed to github-pages July 1, 2026 08:51 — with GitHub Actions Inactive

danielguillan added 2 commits July 1, 2026 11:36

Add story to flakey tests liest

0d85200

Merge branch 'danielguillan/brand-refactor-p0-fixes-batch' of https:/…

58fb3b6

…/github.com/primer/brand into danielguillan/brand-refactor-p0-fixes-batch

danielguillan temporarily deployed to github-pages July 1, 2026 09:40 — with GitHub Actions Inactive

danielguillan marked this pull request as ready for review July 1, 2026 09:42

danielguillan requested a review from a team as a code owner July 1, 2026 09:42

Copilot AI review requested due to automatic review settings July 1, 2026 09:42

Copilot started reviewing on behalf of danielguillan July 1, 2026 09:43 View session

Copilot AI reviewed Jul 1, 2026

View reviewed changes

Comment thread packages/react/src/VideoPlayer/VideoPlayer.tsx Outdated

Address Copilot feedback

9a46d38

danielguillan requested review from jesussandreas and rezrah July 1, 2026 09:59

danielguillan temporarily deployed to github-pages July 1, 2026 10:02 — with GitHub Actions Inactive

danielguillan added 2 commits July 2, 2026 14:38

VideoPlayer autoplay updates

d881697

Remove VideoPlayer autoplay changes

22fcc29

danielguillan temporarily deployed to github-pages July 2, 2026 12:46 — with GitHub Actions Inactive

rezrah approved these changes Jul 3, 2026

View reviewed changes

Merge branch 'main' of github.com:primer/brand into danielguillan/bra…

ead6d62

…nd-refactor-p0-fixes-batch

rezrah had a problem deploying to github-pages July 3, 2026 09:42 — with GitHub Actions Failure

rezrah had a problem deploying to github-pages July 3, 2026 10:46 — with GitHub Actions Failure

rezrah temporarily deployed to github-pages July 3, 2026 10:48 — with GitHub Actions Inactive

rezrah merged commit af3ac05 into main Jul 3, 2026
19 of 21 checks passed

rezrah deleted the danielguillan/brand-refactor-p0-fixes-batch branch July 3, 2026 10:49

primer Bot mentioned this pull request Jul 3, 2026

Release tracking #1381

Merged

github-actions Bot mentioned this pull request Jul 6, 2026

New release available "@primer/react-brand@0.70.0" primer/brand-releases#41

Closed

22 tasks

Navigation Menu

Uh oh!

[Brand Refactor] Small fixes batch - #1387

[Brand Refactor] Small fixes batch#1387
rezrah merged 12 commits into
mainfrom
danielguillan/brand-refactor-p0-fixes-batch

danielguillan commented Jul 1, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Jul 1, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 1, 2026

Uh oh!

github-actions Bot commented Jul 1, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 1, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 1, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

danielguillan commented Jul 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

List of notable changes:

What should reviewers focus on?

Steps to test:

Contributor checklist:

Reviewer checklist:

Screenshots:

Uh oh!

changeset-bot Bot commented Jul 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Jul 1, 2026

🟢 No design token changes found

Uh oh!

github-actions Bot commented Jul 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 No unit test coverage changes found

Uh oh!

github-actions Bot commented Jul 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 Bundle size report

Uh oh!

github-actions Bot commented Jul 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 No visual differences found

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Review details

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

danielguillan commented Jul 1, 2026 •

edited

Loading

changeset-bot Bot commented Jul 1, 2026 •

edited

Loading

github-actions Bot commented Jul 1, 2026 •

edited

Loading

github-actions Bot commented Jul 1, 2026 •

edited

Loading

github-actions Bot commented Jul 1, 2026 •

edited

Loading